AKME Design System

v1.0.0 - Kombai Edition

Sistema de Design Unificado

Consolidando os melhores elementos de design cockpit/aviação e cyberpunk sci-fi com Tailwind v4 e fonte Inter do Google.

Ver Design Tokens Ver Componentes

Características

Design Tokens

Cores, espaçamentos e tipografia padronizados usando @theme do Tailwind v4

Aviation Standard

Cores semânticas baseadas em padrões ICAO/FAA para familiaridade

Cyberpunk Touch

Elementos sci-fi modernos com bordas coloridas e efeitos glow sutis

Design Tokens

Cores

Background

bg-base

#0f172a

bg-surface

#1e293b

bg-elevated

#334155

bg-hover

#475569

Semantic (Aviation/ICAO)
SUCCESS

success

#00ff00

Active/OK

WARNING

warning

#ff9900

Caution

DANGER

danger

#ff0000

Critical

INFO

info

#00d4ff

Data/Nav

Brand
PRIMARY

primary

#38bdf8

ACCENT

accent

#a855f7

Tipografia

Headings

Heading 4XL

36px / 2.25rem

Heading 3XL

30px / 1.875rem

Heading 2XL

24px / 1.5rem

Heading XL

20px / 1.25rem

Body Text

Large - 18px

1.125rem

Base (default) - 16px

1rem

Small - 14px

0.875rem

Extra Small - 12px

0.75rem

Font Families

Inter - Sans-serif principal

Abcdefghijklmnopqrstuvwxyz 0123456789

Roboto Mono - Monospace

Abcdefghijklmnopqrstuvwxyz 0123456789

Espaçamento (Grid 8px)

spacing-1 4px / 0.25rem
spacing-2 8px / 0.5rem
spacing-3 12px / 0.75rem
spacing-4 16px / 1rem
spacing-6 24px / 1.5rem
spacing-8 32px / 2rem
spacing-12 48px / 3rem

Border Radius

none

0

sm

4px

md

6px

lg

8px

xl

12px

2xl

16px

full

9999px

Prévia de Componentes

Explore os componentes completos na página de componentes

Botões

Badges

Default Primary Success Warning Danger

Alerts

Informação
Base de dados atualizada com sucesso.
Sucesso
Operação concluída com sucesso.
Atenção
Configuração precisa ser revisada.